<template>
  <div class="over">
    <van-icon @click="change" class="arrow-left" name="arrow-left" color="#ccc" size="16px" />
    <div class="imgwrap" v-if="getList.length">
      <img :src="getList[getList.length - 1].path" alt />
    </div>
    <p>
      我的金币
      <img src="../assets/img/jinbi.webp" alt />
      <span>0</span>
    </p>
    <div class="wrap">
      <ul>
        <li v-for="item in getList.slice(0, getList.length - 1)" :key="item._id">
          <img :src="item.path" alt />
          <div>
            <p>{{ item.name }}</p>
            <div class="bottom">
              <span style="color:#ccc">已售：{{ item.sold }}</span>
              <span style="color: gold">
                <img src="../assets/img/jinbi.webp" alt />
                {{ item.price }}
              </span>
            </div>
          </div>
        </li>
      </ul>
      <div class="button">
        <van-button
          class="round animate__animated animate__pulse"
          color="orange"
          round
          type="primary"
          >立即邀请</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { mapState, mapActions } from "vuex";

export default {
  setup() {
    const router = useRouter();
    const change = () => {
      router.push("/home/mine");
    };
    return {
      router,
      change
    };
  },
  computed: {
    ...mapState({
      getList: state => state.mine.getList
    })
  },
  mounted() {
    this.getPic();
  },
  methods: {
    ...mapActions(["getPic"])
  }
};
</script>
<style lang="scss" scoped>
.animate__pulse {
  animation-iteration-count: infinite;
}
.over {
  overflow: hidden;
  background: #f5f5f5;
  .arrow-left {
    float: left;
    font-weight: 600;
    margin-left: 15px;
    margin-top: 15px;
  }
}
.imgwrap {
  width: 100%;
  height: 300px;
  margin-top: 46px;
  img {
    width: 100%;
    height: 100%;
  }
}
.wrap {
  padding: 0 10px;
}
p {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  text-indent: 1em;
  img {
    width: 16px;
    height: 16px;
    margin-left: 20px;
  }
}
ul {
  margin-bottom: 70px;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  li {
    width: 171px;
    height: 240px;
    background: #f5f5f5;
    box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
    border-radius: 10px;
    margin-bottom: 12px;
    img {
      width: 100%;
      height: 167px;
    }
    p {
      line-height: 0;
      margin-bottom: 25px;
    }
    .bottom {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    span {
      font-size: 14px;
      img {
        width: 16px;
        height: 16px;
      }
    }
  }
}
.round {
  position: fixed;
  bottom: 20px;
  left: 13px;
  width: 346px;
}
</style>
